<template>
	<!-- 自定义tab -->
	<view class="tab-bar">
		<template v-for="(item,index) in list" >
			<view :key="item.pagePath+index" class="tab-bar-item" @click="switchTab(item.pagePath, index)" v-if="index !== 2">
				<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
				<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
			</view>
			<view class="tab-center-item" :key="item.pagePath+index" @click="switchTab(item.pagePath, index)" v-else>
				<view class="center-item-background">
					<view class="center-item-img">
						<image class="center-img-oval" :src="item.iconPath"></image>
						<image class="center-img-plus" :src="item.selectedIconPath"></image>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			selected:0,
		},
		data() {
			return {
				"color":"#87859A",
				"selectedColor":"#4044FC",
				"backgroundColor":"#FFFFFF",
				"list": [
					{
					    "pagePath" : "/pages/tabBar/details/details",
						"text": "明细",
						"iconPath": "/static/images/tabBar/home.png",
						"selectedIconPath": "/static/images/tabBar/home_select.png"
					},
					{
					    "pagePath" : "/pages/tabBar/account/account",
						"text": "记账",
						"iconPath": "/static/images/tabBar/wallet.png",
						"selectedIconPath": "/static/images/tabBar/wallet_select.png"
					},
					{
					    "pagePath" : "/pages/tabBar/account/account",
						"text": "",
						"iconPath": "/static/images/tabBar/Oval.png",
						"selectedIconPath": "/static/images/tabBar/plus.png"
					},
					{
					    "pagePath" : "/pages/tabBar/chart/chart",
						"text": "图表",
						"iconPath": "/static/images/tabBar/expenses.png",
						"selectedIconPath": "/static/images/tabBar/expenses_select.png"
					},
					{
					    "pagePath" : "/pages/tabBar/mine/mine",
						"text": "我的",
						"iconPath": "/static/images/tabBar/profile.png",
						"selectedIconPath": "/static/images/tabBar/profile_select.png"
					}
				]
			}
		},
		methods: {
			switchTab(path, idx) {
				uni.switchTab({
					url: path,
				});
			}
		}
	}
</script>


<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.tab_img {
				width: 34rpx;
				height: 34rpx;
			}
 
			.tab_text {
				font-size: 18rpx;
				margin-top: 6rpx;
			}
		}
		.tab-center-item{
			flex: 1;
			text-align: center;
			position: relative;
			.center-item-background{
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50%;
				background-color: #efefef;
				top: -100rpx;
				.center-item-img{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.center-img-oval{
					position: absolute;
					width: 116rpx;
					height: 116rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.center-img-plus{
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>
